<template>
  <div class="content">
    课程{{ type }}
    <div class="course-list">
      <div
        class="course-item"
        v-for="(item, index) in courseList"
        :key="index">
        <div class="course" :class="'course-' + item.subjectType">
          <div class="course-body flex justify-content-center align-items-center">
            <i class="iconfont" :class="'icon-' + item.subjectType"></i>
          </div>
          <div class="course-footer">
            <p class="title">{{ item.title }}</p>
            <div class="info flex justify-content-space-between">
              <div>
                <span class="info-item classification">{{ item.classification }}</span>
                <span class="info-item subject">{{ item.subject }}</span>
              </div>
              <div><span>{{ item.sale.price }}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const courseList = [
  { classificationType: 'primary', classification: '小学', subjectType: 'yuwen', subject: '语文', title: '小学语文', sale: { price: 500 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'shuxue', subject: '数学', title: '小学数学', sale: { price: 400 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'shuxue', subject: '数学', title: '小学奥数', sale: { price: 600 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'yingyu', subject: '英语', title: '小学英语', sale: { price: 550 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'yuwen', subject: '语文', title: '小学语文', sale: { price: 500 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'shuxue', subject: '数学', title: '小学数学', sale: { price: 400 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'shuxue', subject: '数学', title: '小学奥数', sale: { price: 600 }, period: 16 },
  { classificationType: 'primary', classification: '小学', subjectType: 'yingyu', subject: '英语', title: '小学英语', sale: { price: 550 }, period: 16 },
]
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      courseList: []
    }
  },
  methods: {
    init () {
      this.courseList = courseList.slice(0)
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
  @import "../../assets/scss/var.scss";
  .course-list {
    width: 100%;
    box-sizing: border-box;
    &:after {
      content: '';
      display: block;
      clear: both;
    }
    .course-item {
      float: left;
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 20px;
    }
  }
  .course {
    width: 200px;
    .course-body {
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      border-radius: 5px;
      .iconfont {
        font-size: 80px;
      }
    }
    .course-footer {
      box-sizing: border-box;
      padding: 5px 10px;
      .title {
        font-size: 14px;
        line-height: 25px;
        color: $text-primary;
      }
      .info {
        font-size: 12px;
        line-height: 25px;
        color: $text-secondary;
        span {
          margin-right: 5px;
        }
      }
    }
    &.course-yuwen {
      .course-body {
        background-color: $red;
        color: $white;
      }
    }
    &.course-shuxue {
      .course-body {
        background-color: $blue;
        color: $white;
      }
    }
    &.course-yingyu {
      .course-body {
        background-color: $yellow;
        color: $white;
      }
    }
  }
</style>
